import 'package:flutter/material.dart';
import 'package:xbaistack/model/option.dart';
import 'package:xbaistack/utils/helper.dart';
import 'package:xbaistack/widget/group_setting.dart';
import 'package:xbaistack/widget/bottom_sheet/selectable.dart';

class SelectPage extends StatefulWidget {
  const SelectPage({super.key});

  @override
  State<SelectPage> createState() => _SelectPageState();
}

class _SelectPageState extends State<SelectPage> {
 Option<String>? gender;
  List<Option<String>>? hobbyList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[00],
      appBar: AppBar(title: const Text("选择")),
      body: GroupSetting(
        children: [
          Item.text(
            title: '性别',
            description: gender?.label,
            onTap: () async {
              // 路由跳转到性别选择页面
              final result = await MySelectable<String>(
                context: context,
                title: '请选择',
                showClose: true,
                initialValue: gender == null ? null : [gender!.value],
                options: [
                  Option<String>(
                    value: '男',
                    label: '男',
                    icon: Icon(Icons.people, color: Colors.blue),
                  ),
                  Option<String>(value: '女', label: '女'),
                ],
              ).show();
              if (Helper.isNotEmpty(result)) {
                setState(() {
                  gender = result![0];
                });
              }
              // MyRouter.routeTo<dynamic>(context, GenderPage);
            },
          ),
          Item.text( 
            title: '多选项',
            description: hobbyList?.map((e) => e.label).join(', '),
            onTap: () async {
              MySelectable<String>(
                context: context,
                title: '请选择',
                initialValue: hobbyList?.map((e) => e.value).toList(),
                showClose: true,
                options: List.generate(
                  20,
                  (index) =>
                      Option<String>(value: '选项$index', label: '选项$index'),
                ),
                multiple: true,
              ).show().then((result) {
                if (Helper.isNotEmpty(result)) {
                  setState(() {
                    hobbyList = result;
                  });
                }
              });
            },
          ),
        ],
      ),
    );
  }
}
